<html><head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>CodeThatXPBar - The main style properties Example</title>
<meta http-equiv="content-language" content=en>
<meta name=robots content="DISALLOW">
<meta http-equiv=expires content="Mon, 01 Jan 1990 00:00:00 GMT">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv=pragma content="no-cache">
<meta name="revisit-after" content="1 day">
<meta http-equiv="content-script-type" content="text/javascript">
<link rel=stylesheet type="text/css" href="s.css">

<script language="javascript1.2" src="../Scripts/codethatsdk.js"></script><script language="javascript1.2" src="../Scripts/codethatxpbarstd.js"></script><script language="javascript1.2" src="style_ex.js"></script></head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor=#FFFFFF>
<p class=cp22><a href="http://www.codethat.com/"><img src="img/logo.gif" width=148 height=40 border=0 alt="CodeThat.com"></a></p>
<p class=cp25><font class=cf5>CodeThatXPBar - The main style properties Example</font></p><script language="javascript1.2">
<!--
var bar1 = new CXPBar(BarDef, 'bar1');
bar1.create();
bar1.run();
//-->
</script>
<p class=cp10><img src="img/s.gif" width=1 height=170></p>

<pre class=cc1>
<font class=cc3><font class=cc5>var</font> BarDef <font class=cc2>=</font>
<font class=cc7>{</font></font>
	<font class=cc6>"style"</font>	 <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"css"</font>	 <font class=cc2>:</font> <font class=cc6>"bartitle"</font><font class=cc2>,</font>
		<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
		<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#6C86DC"</font><font class=cc2>,</font>
		<font class=cc6>"size"</font>	 <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>110</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
		<font class=cc6>"shadow"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#C0C0C0"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#000000"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"imgspace"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font>
		<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_down.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font>
			<font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_up.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font>
			<font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>10</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"fixheight"</font> <font class=cc2>:</font> <font class=cc4>250</font><font class=cc2>,</font>
		<font class=cc6>"scroller"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>25</font><font class=cc2>,</font> <font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
			<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font>
			<font class=cc6>"up"</font> <font class=cc2>:</font> <font class=cc6>"img/scroller_up.gif"</font><font class=cc2>,</font>
			<font class=cc6>"down"</font> <font class=cc2>:</font> <font class=cc6>"img/scroller_down.gif"</font><font class=cc2>,</font>
			<font class=cc6>"step"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"time"</font> <font class=cc2>:</font> <font class=cc4>30</font><font class=cc2>,</font> <font class=cc6>"len"</font> <font class=cc2>:</font> <font class=cc4>60</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"css"</font> <font class=cc2>:</font> <font class=cc6>"bartitleover"</font><font class=cc2>,</font>
		<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_down_over.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"src"</font> <font class=cc2>:</font> <font class=cc6>"img/arr_up_over.gif"</font><font class=cc2>,</font>
			<font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>24</font><font class=cc2>,</font> <font class=cc6>"height"</font> <font class=cc2>:</font> <font class=cc4>24</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg.gif"</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"itemon"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#265BCC"</font><font class=cc2>,</font> <font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"position"</font> <font class=cc2>:</font> <font class=cc7>{</font>
		<font class=cc6>"absolute"</font> <font class=cc2>:</font> <font class=cc4>true</font><font class=cc2>,</font> <font class=cc6>"pos"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>10</font><font class=cc2>,</font> <font class=cc4>10</font><font class=cc8>]</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc6>"items"</font> <font class=cc2>:</font> <font class=cc8>[</font>
	<font class=cc7>{</font>
		<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 1"</font><font class=cc2>,</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg.gif"</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>100</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
				<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
				<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
				<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
				<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"items"</font>	 <font class=cc2>:</font> <font class=cc8>[</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 1"</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 2"</font>
			<font class=cc7>}</font> <font class=cc8>]</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc7>{</font>
		<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 2"</font><font class=cc2>,</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg.gif"</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>100</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
				<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
				<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
				<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
				<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"items"</font>	 <font class=cc2>:</font> <font class=cc8>[</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 1"</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 2"</font>
			<font class=cc7>}</font> <font class=cc8>]</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc7>{</font>
		<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 3"</font><font class=cc2>,</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg.gif"</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>100</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
				<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
				<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
				<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
				<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"items"</font>	 <font class=cc2>:</font> <font class=cc8>[</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 1"</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 2"</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 3"</font>
			<font class=cc7>}</font> <font class=cc8>]</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font><font class=cc2>,</font>
	<font class=cc7>{</font>
		<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 4"</font><font class=cc2>,</font>
		<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
			<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>"img/title_bg.gif"</font>
		<font class=cc7>}</font><font class=cc2>,</font>
		<font class=cc6>"menu"</font> <font class=cc2>:</font> <font class=cc7>{</font>
			<font class=cc6>"style"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"size"</font> <font class=cc2>:</font> <font class=cc8>[</font><font class=cc4>100</font><font class=cc2>,</font> <font class=cc4>25</font><font class=cc8>]</font><font class=cc2>,</font>
				<font class=cc6>"bgcolor"</font> <font class=cc2>:</font> <font class=cc6>"#D6DFF7"</font><font class=cc2>,</font>
				<font class=cc6>"border"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"color"</font> <font class=cc2>:</font> <font class=cc6>"#ffffff"</font><font class=cc2>,</font> <font class=cc6>"width"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font><font class=cc2>,</font>
				<font class=cc6>"align"</font> <font class=cc2>:</font> <font class=cc6>"center"</font><font class=cc2>,</font>
				<font class=cc6>"itemoffset"</font> <font class=cc2>:</font> <font class=cc7>{</font>
					<font class=cc6>"x"</font> <font class=cc2>:</font> <font class=cc4>5</font><font class=cc2>,</font> <font class=cc6>"y"</font> <font class=cc2>:</font> <font class=cc4>1</font>
				<font class=cc7>}</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"itemover"</font> <font class=cc2>:</font> <font class=cc7>{</font>
				<font class=cc6>"imgendon"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"imgendoff"</font> <font class=cc2>:</font> <font class=cc7>{</font> <font class=cc7>}</font><font class=cc2>,</font>
				<font class=cc6>"bgimg"</font> <font class=cc2>:</font> <font class=cc6>""</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc6>"items"</font>	 <font class=cc2>:</font> <font class=cc8>[</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 1"</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 2"</font>
			<font class=cc7>}</font><font class=cc2>,</font>
			<font class=cc7>{</font>
				<font class=cc6>"text"</font> <font class=cc2>:</font> <font class=cc6>"Item 3"</font>
			<font class=cc7>}</font> <font class=cc8>]</font>
		<font class=cc7>}</font>
	<font class=cc7>}</font> <font class=cc8>]</font>
<font class=cc7>}</font><font class=cc2>;</font> 
</pre>

</body></html>